import React from 'react';
import { connect } from 'dva';
import styles from './Oneself.css';
import Opponent from '../Opponent/Opponent';
import Operation from '../Operation/Operation';

class Oneself extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      poker: null,
      username: this.props.ready.username,
      isMe: null,
    };
  }

  componentWillReceiveProps(nextProps) {
    const room = nextProps.room;
    if (room.poker) {
      this.setState({ poker: room.poker });
    }
    if (room.stake && room.stake.at === this.state.username) {
      this.setState({ isMe: true });
    } else {
      this.setState({ isMe: false });
    }
  }
  render() {
    return (
      <div ref="show" className={styles.root}>
        <Opponent data={this.state.username} poker={this.state.poker} />
        <Operation data={this.state.isMe} dispatch={this.props.dispatch} roomnum={this.props.ready.roomnum} username={this.props.ready.username} />
      </div>
    );
  }

}

function mapStateToProps(state) {
  const room = state.room;
  const ready = state.ready.data;
  return { ready, room };
}

export default connect(mapStateToProps)(Oneself);
